Traquer – Testing made easy

Traquer is a tool that enables you to record a testing session on you web/page/app, than reproduce it, monitor how it performed, create a naïve heatmap, and even automate your testing sessions using Selenium Webdriver and Jasmine.

Said that, which is a huge leap, keep in mind that it’s work in progress. Things are not fancy, some are even pretty dumb. But it works 🙂 !

I’ve created this tool to automate testing of DOM-heavy Ext JS projects, but it can be used virtually for any other reason.

Problem with Ext JS is that it has pretty hefty DOM output, elements are generated with lots and lots wrapping, dynamic id’s etc., which makes any conventional testing method quite hard to implement.

Another good thing about Traquer is that you can export testing case from one and import it to another browser, and it will work with little or no effort at all.

So, to cut writing I’ve prepared few videos that demonstrate basic functionality of some features that I find most interesting.

Record and playback

In following example, you’ll see a record and playback on Ext JS example called ‘Admin Dashboard’.

Another example shows that there is actual list of recorded cases, which you can use to set up playback.

Heatmap

You can create heatmap from one ore many cases.

Playback after DOM mutation

In this example, I’ve reloaded page which means – new element id’s (testing hell).

Export/import to different browsers

Here, I’ll create case in Firefox, export it from there, and import it to Chrome. It’ll perform good.

Joining cases

In this last video for this post, I’m showing how to join multiple cases to one ‘mega-case’.

Some explanations

Event beans

Those beans that you’ve seen in videos are representing events collected while you’ve been recording your case. They differ in color and position.

You can read them from right to left (time in percentage) and from top to bottom (event execution time in regards of total time). Reds and blues stand out of this since ones are user actions (keyboard events, clicks) and the following are DOM events, respectively.

It might not be the best choice to display them like this, but that’s all I could figure out in this short time. (still working on it)

DOM mutation check

After we collected all of the events and their respective elements, we can compare them against current working DOM. In that way we get percentage of similarity between our saved cases and current DOM.

DOM change, either by application update, or if application generate it. In either case any similarity below 50% is considered changed, and to be replayed.

This is pretty tricky, for example saved cases with modals can gravely decrease similarity when checked against current DOM that doesn’t yet have activated that modal.

Therefore we have ‘Override similarity restriction’ button which you can use to playback the test ‘no matter what’.

Automation

Right now, I’m working on test runner that will take saved cases and automate them with Selenium Webdriver and Jasmine. Current status of that part is <kids play>, so don’t take it seriously, but you can check the code here and now.

Live example

Live example lives here, but it’s not so fresh. To test latest version please get the code for yourself from Github repo.

 

---

 

That would be all for now and remember, this is work in progress so there will be updates to this page :-).

 

P.S.

Direct links:

Traquer Github repo – https://github.com/nenadg/traquer

Live example – http://statick.org:3008/examples/admin-dashboard